<template>
	<view class="container">
		<view class="terminal-wrapper">
			<view class="terminal-title mb12">终端管理</view>
			<view class="terminal-wrapper-item">
				<view class="terminal-item">
					<view class="terminal-item-title">
						<view><span></span>终端总数(台)</view>
						<!-- <view><u-icon name="arrow-right"></u-icon></view> -->
					</view>
					<view class="terminal-num">{{totalAllTermCountByTeam}}</view>
					<view class="item">昨日激活：{{yesterdayActiveTermCountByTeam}}</view>
					<view class="item">昨日绑定：{{yesterdayBindTermCountByTeam}}</view>
				</view>
				<view class="terminal-item">
					<view class="terminal-item-title">
						<view><span></span>总激活(台)</view>
						<!-- <view><u-icon name="arrow-right"></u-icon></view> -->
					</view>
					<view><view class="terminal-num">{{totalActiveTermCountByTeam}}</view></view>
					<view><view class="item">直营激活：{{subActiveTermCountByTeam}}</view></view>
					<view><view class="item">下级激活：{{subAllActiveTermCountByTeam}}</view></view>
				</view>
			</view>
		</view>
		<view class="pd15">
			<view class="terminal-title mb12 mt12">终端库存管理</view>
			<view class="terminal-management" >
				<template  v-for="(item, index) in terminalManagementList">
					<view class="terminal-management-item" :style="item.bg" @click="navTo(item.routerLink)">
						<view style="height: 40px; display: flex;align-items: center;padding: 0 10px; float: left;"><u-icon :name="item.icon" :size="76"></u-icon></view>
						<view style="float: left;">
							<view class="terminal-name" style="padding: 5px 0;">{{item.terminalName}}</view>
							<view class="num-box" v-if="item.showNum">{{item.numTitle}}：<span class="num">{{item.num}}</span></view>
							<view class="num-box" v-if="!item.showNum" style="opacity: 0;">{{item.numTitle}}<span class="num">{{item.num}}</span></view>
						</view>
						<view class="item-tip" :style="item.tipBg"><u-icon name="arrow-right" color="#fff"></u-icon></view>
					</view>
				</template>
			</view>
		</view>
		<view class="pd15">
			<view class="terminal-title mb12">业务配置</view>
			<view>
				
				<view class="terminal-management" >
					<template  v-for="(item, index) in list">
						<view class="terminal-management-item" :style="item.bg" @click="navTo(item.routerLink)">
							<view style="height: 40px; display: flex;align-items: center;padding: 0 10px; float: left;"><u-icon :name="item.icon" :size="76"></u-icon></view>
							<view style="float: left;">
								<view class="terminal-name" style="padding: 5px 0;">{{item.terminalName}}</view>
								<view class="num-box" v-if="item.showNum">{{item.numTitle}}：<span class="num">{{item.num}}</span></view>
								<view class="num-box" v-if="!item.showNum" style="opacity: 0;">{{item.numTitle}}<span class="num">{{item.num}}</span></view>
							</view>
							<view class="item-tip" :style="item.tipBg"><u-icon name="arrow-right" color="#fff"></u-icon></view>
						</view>
					</template>
				</view>
			</view>
		</view>

		<m-footer :tabIdx="1"></m-footer>
	</view>
</template>

<script>
	import {
		canAssginList,
		callbackList
	} from '_a/terminal';
	import { totalTermIndex,totalTerminalIndex } from '_a/data/term';
	export default {
		data() {
			return {
				query: {
					policyCode: this.$store.getters.policyList[0] ? this.$store.getters.policyList[0].policyCode : ''
				},
				terminalManagementList:[{
					routerLink: '/pages/home/terminal/index',
					icon:require('@/common/images/termial/icon1.png'),
					terminalName:'终端管理',
					showNum:true,
					numTitle:'总数',
					num:0,
					bg:{background: '#f4f3fb'},
					tipBg:{background: '#b69cff'}
				}
				,
				{
					routerLink: '/pages/home/terminal/termBackList',
					icon:require('@/common/images/termial/icon2.png'),
					terminalName:'回拨记录',
					showNum:false,
					numTitle:'总数',
					num:0,
					bg:{background: '#fbf1f2'},
					tipBg:{background: '#ff89a7'}
				}
				,{
					routerLink: '/pages/home/terminal/operation?type=assign&=',
					icon:require('@/common/images/termial/icon3.png'),
					terminalName:'终端划拨',
					showNum:true,
					numTitle:'可调拨',
					num:0,
					bg:{background: '#faf6ed'},
					tipBg:{background: '#ffbb56'}
				},{
					routerLink: '/pages/home/terminal/operation?type=back&=',
					icon:require('@/common/images/termial/icon4.png'),
					terminalName:'终端回拨',
					showNum:true,
					numTitle:'可回拨',
					num:0,
					bg:{background: '#ecf8f6'},
					tipBg:{background: '#6bde9b'}
				}],
				list:[{
					routerLink: '/pages/home/terminal/brandModification',
					icon:require('@/common/images/termial/icon5.png'),
					terminalName:'修改终端品牌',
					showNum:true,
					numTitle:'可修改',
					num:0,
					bg:{background: '#edf8f2'},
					tipBg:{background: '#6adecb'}
				}
				// ,{
				// 	icon:require('@/common/images/termial/icon6.png'),
				// 	terminalName:'流量卡配置',
				// 	showNum:false,
				// 	numTitle:'总数',
				// 	num:0,
				// 	bg:{background: '#eff4fa'},
				// 	tipBg:{background: '#71b5fe'}
				// },
				],
				totalAllTermCountByTeam: 0,
				yesterdayActiveTermCountByTeam: 0,
				yesterdayBindTermCountByTeam: 0,
				totalActiveTermCountByTeam: 0,
				subActiveTermCountByTeam: 0,
				subAllActiveTermCountByTeam: 0
			};
		},
		computed: {
			account() {},
		},
		// 下拉刷新
		async onPullDownRefresh() {
			// this.$store.dispatch("getUserDetail").then((res) => {
				
			// });
			this.getData();
			uni.stopPullDownRefresh();
			this.$tip.toast("刷新成功!", "success", 500);
		},
		onShow() {
			this.getData();
		},
		methods: {
			// async initData() {
			// 	await this.getData();
			// },
			async getData() {
				var routerLinkMap = {};
				var routerLinkMapA = {};
				this.terminalManagementList.forEach(item => {
				  routerLinkMap[item.routerLink] = item;
				});
				this.list.forEach(item => {
				  routerLinkMapA[item.routerLink] = item;
				});
				
				totalTerminalIndex({ policyCode: this.query.policyCode ,agentType:1}).then(res => {
					if(res.code == 200) {
						this.totalAllTermCountByTeam = res.data.totalAllTermCountByTeam
						this.yesterdayActiveTermCountByTeam = res.data.yesterdayActiveTermCountByTeam
						this.yesterdayBindTermCountByTeam = res.data.yesterdayBindTermCountByTeam
						this.totalActiveTermCountByTeam = res.data.totalActiveTermCountByTeam
						this.subActiveTermCountByTeam = res.data.subActiveTermCountByTeam
						this.subAllActiveTermCountByTeam = res.data.subAllActiveTermCountByTeam
					
						routerLinkMap['/pages/home/terminal/index'].num = this.totalAllTermCountByTeam
						
					}
				});
				
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				};
				
				//查询机具划拨列表，获取总数
				canAssginList(params).then(res => {
					if (res) {
						routerLinkMap['/pages/home/terminal/operation?type=assign&='].num = res.total
						routerLinkMapA['/pages/home/terminal/brandModification'].num = res.total
					}
				})
				
				//查询终端回拨列表，获取总数
				callbackList(params).then(res => {
					if (res) {
						routerLinkMap['/pages/home/terminal/operation?type=back&='].num = res.total
					}
				})
				// this.$store.dispatch("getUserDetail").then((res) => {
				// 	this.list = res.wallet;
				// 	// this.list = this.$store.getters.userInfo.wallet;
				// 	this.num = this.list.reduce((total, item) => {
				// 		return (total +=
				// 			item.usableAmount - item.transitAmount - item.freezeAmount);
				// 	}, 0);
				// 	this.info = res.info;
				// 	this.agentPermission.allowWithdraw = res?.agentPermission?.allowWithdraw;
				// 	this.$forceUpdate()
				// });
			},
			// navTo(item) {
				// this.$nav.push({
				// 	path: "/pages/earnings/earningsDetails",
				// 	query: {
				// 		type: item.walletType
				// 	},
				// });
			// },
			navTo(path) {
				this.$nav.push({
					path: path
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	$terminal-wrapper-item-linear-bg:linear-gradient(90deg, #9c79fd, #6c3cff);
	$terminal-wrapper-linear-bg:linear-gradient(0deg,rgba(243,233,255,0.2), #9976ff);
	.pd15{
		padding: 0px $uni-spacing-row-lg;
	}
	.mb12{margin-bottom: $uni-spacing-col-lg;}
	.mt12{margin-top: $uni-spacing-col-lg;}
	.container{
		// padding:15px 15px 50px 15px;
		.terminal-wrapper{
			padding:15px;
			background:$terminal-wrapper-linear-bg;
			
			.terminal-wrapper-item{
				padding: $uni-spacing-row-base;
				display: flex;
				justify-content: space-between;
				// border: 1px solid #ddd;
				border-radius: 10px;
				background:$terminal-wrapper-item-linear-bg;
				box-shadow:rgba(255, 255, 255, 0.1) 0px 0px 3px 1px;
				view{
					color: #fff;
				}
				.terminal-item{
					line-height: 24px;
					width: 50%;
					padding: $uni-spacing-row-base;
					
					.terminal-num{
						font-size: $uni-font-size-lg;
						font-weight: bold;
						padding: $uni-spacing-col-lg 0;
						padding-left: $uni-spacing-row-lg;
					}
					.item{
						font-size: $uni-font-size-sm;
						line-height: 24px;
						padding-left: $uni-spacing-row-lg;
					}
				}
				.terminal-item:first-child {
					border-right: 2px solid rgba(255, 255, 255, 0.4);
					.terminal-item-title{
						padding-right: $uni-spacing-row-base;
					}
				}
				.terminal-item:last-child {
					>view{
						padding-left: $uni-spacing-row-base;
					}
				}
				.terminal-item-title{
					// border-left: 4px solid #fff;
					// padding-left: $uni-spacing-row-base;
					display: flex;
					justify-content: space-between;
					align-items: center;
					span{
						display: inline-block;
						background: #fff;
						height: 10px;
						width: 4px;
						border-radius: 2px;
						margin-right: $uni-spacing-row-base;
					}
					
				}
			}
		}
		.terminal-title{
			padding: $uni-spacing-col-lg 0;
			font-size: $uni-font-size-lg;
		}
		.terminal-management{
			display: flex;
			justify-content: space-between;
			flex-wrap:wrap;
			.terminal-management-item{
				width: 48%;
				// display: flex;
				// justify-content: space-between;
				align-items: center;
				background-color: #e7e5f9;
				border-radius: $uni-border-radius-xl;
				// height: 80px;
				margin-bottom: $uni-spacing-col-lg;
				padding: $uni-spacing-col-lg 0;
				overflow: hidden;
				view{
					// display: flex;
					// align-items: center;
				}
				.num-box{
					font-size: $uni-font-size-sm;
				}
				.num{
					font-size: $uni-font-size-lg;
					color: $uni-color-error;
					font-weight: bold;
				}
				.item-tip{
					float: right;
					justify-content: end;
					padding-left: 6px;
					padding-top: 2px;
					padding-bottom: 2px;
					border-bottom-left-radius: $uni-border-radius-circle;
					border-top-left-radius: $uni-border-radius-circle;
				}
			}
		}
	}
</style>>